import { useState } from "react";
import Task from './Task';

export default function TaskList({
  todos,
  onChangeTodo,
  onDeleteTodo
}) {
  return (
    <ul style={{ padding: '0px' }}>
      {todos.map(t => {
        return (
          <li
            style={{ marginBottom: '8px', listStyle: 'none', }}
            key={t.id}>
            <Task
              todo={t}
              onChangeTodo={onChangeTodo}
              onDeleteTodo={onDeleteTodo} />
          </li>
        )
      })}
    </ul>
  )
}